<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id='app'>
        <!-- 使用 v-cloak 能够解决插值表达式闪烁的问题 -->
        <p v-cloak>{{msg}}</p>
        <!-- 默认 v-text 没有闪烁的问题 -->
        <h4 v-text="msg"></h4>
        <!-- v-text 会覆盖元素中原本的内容，但是插件表达式只会替换自己的占位符 -->
        
        <!-- v-html 可以解析字符串中的html标签 -->
        <div v-html="msg2"></div>

        <!-- v-bind: 绑定属性，"" 中的内容当作js表达式来解析, 可以简写成 ":属性" v-bind 可以省略 -->
        <input type="button" value="按钮" v-bind:title="mytitle + '123'">

        <!-- v-on 绑定事件 如click, mouseover 等, 可以简写成 "@:click"-->
        <input type="button" value="Hello" v-on:click="show">
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"123",
                msg2:"<h1>456</h1>",
                mytitle:"mytitle"
            },
            methods:{ // 定义当前vue实例所有可用的方法
                 show:function(){
                     alert("Hello")
                 }
            }
        })
    </script>
</body>
</html>